<template>
  <div>
    <div class="main_navigator">
      <el-breadcrumb separator="/" style="font-size:18px;">
        <el-breadcrumb-item>
          <span @click="goBack">返回</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{crumbOne}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{crumbOne}}</el-breadcrumb-item>
        <el-breadcrumb-item>
          <span :class="active_crumb">{{crumbOne}}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main_content">
      <el-button type="success" @click="toAddOrEdit()">新增或编辑</el-button>
    </div>
    <el-dialog v-dialogDrag ref="dialog_isAdd" :title="addOrEdit" :visible.sync="isAdd" width="40%">
      <el-form :model="theAdd" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="编码" prop="goods_number">
          <el-input v-model="theAdd.goods_number" placeholder="请输入编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="供应商" prop="supplier_id">
          <el-select v-model="theAdd.supplier_id" placeholder="请选择供应商">
            <el-option
              v-for="item in allSupplier"
              :key="item.supplier_id"
              :label="item.supplier_name+'-'+item.supplier_phone"
              :value="item.supplier_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="小类" prop="goodstype_id">
          <div style="max-height:200px;overflow:auto;">
            <el-tree
              style="max-width:500px;"
              ref="tree"
              node-key="goodstype_id"
              :data="allClass"
              :props="defaultProps"
              :default-expanded-keys="theKeys"
              :accordion="true"
              :highlight-current="true"
              @node-click="handleNodeClick"
            ></el-tree>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="doAdd('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: "",
      active_crumb: "active_crumb", //面包屑当前颜色
      tableHeaderStyle: {
        "background-color": "rgb(201,222,251)"
      },
      crumbOne: "开发规范",
      allClass: [
        //无限极分类tree
        {
          goodstype_id: 1,
          goodstype_name: "临时食宿",
          hierarchy: 0,
          goodstype_number: null,
          level: 1,
          top_limit: null,
          floor_limit: null,
          waring_time: null,
          goodsType: [
            {
              goodstype_id: 4,
              goodstype_name: "饮用水",
              hierarchy: 1,
              goodstype_number: null,
              level: 2,
              top_limit: null,
              floor_limit: null,
              waring_time: null,
              goodsType: [
                {
                  goodstype_id: 10,
                  goodstype_name: "瓶装水",
                  hierarchy: 4,
                  goodstype_number: "040101",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                }
              ]
            },
            {
              goodstype_id: 5,
              goodstype_name: "食品",
              hierarchy: 1,
              goodstype_number: null,
              level: 2,
              top_limit: null,
              floor_limit: null,
              waring_time: null,
              goodsType: [
                {
                  goodstype_id: 11,
                  goodstype_name: "罐头",
                  hierarchy: 5,
                  goodstype_number: "040202",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                }
              ]
            }
          ]
        },
        {
          goodstype_id: 2,
          goodstype_name: "防护用品",
          hierarchy: 0,
          goodstype_number: null,
          level: 1,
          top_limit: null,
          floor_limit: null,
          waring_time: null,
          goodsType: [
            {
              goodstype_id: 6,
              goodstype_name: "卫生防疫",
              hierarchy: 2,
              goodstype_number: null,
              level: 2,
              top_limit: null,
              floor_limit: null,
              waring_time: null,
              goodsType: [
                {
                  goodstype_id: 12,
                  goodstype_name: "防护服",
                  hierarchy: 6,
                  goodstype_number: "010101",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                }
              ]
            },
            {
              goodstype_id: 7,
              goodstype_name: "消防",
              hierarchy: 2,
              goodstype_number: null,
              level: 2,
              top_limit: null,
              floor_limit: null,
              waring_time: null,
              goodsType: [
                {
                  goodstype_id: 13,
                  goodstype_name: "防火服",
                  hierarchy: 7,
                  goodstype_number: "010301",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                },
                {
                  goodstype_id: 14,
                  goodstype_name: "头盔",
                  hierarchy: 7,
                  goodstype_number: "010302",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                }
              ]
            }
          ]
        },
        {
          goodstype_id: 3,
          goodstype_name: "生命救助",
          hierarchy: 0,
          goodstype_number: null,
          level: 1,
          top_limit: null,
          floor_limit: null,
          waring_time: null,
          goodsType: [
            {
              goodstype_id: 8,
              goodstype_name: "救生",
              hierarchy: 3,
              goodstype_number: null,
              level: 2,
              top_limit: null,
              floor_limit: null,
              waring_time: null,
              goodsType: [
                {
                  goodstype_id: 15,
                  goodstype_name: "救生圈",
                  hierarchy: 8,
                  goodstype_number: "020101",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                },
                {
                  goodstype_id: 16,
                  goodstype_name: "救生衣",
                  hierarchy: 8,
                  goodstype_number: "020102",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                },
                {
                  goodstype_id: 17,
                  goodstype_name: "救生艇(筏)",
                  hierarchy: 8,
                  goodstype_number: "020103",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                }
              ]
            },
            {
              goodstype_id: 9,
              goodstype_name: "掩埋",
              hierarchy: 3,
              goodstype_number: null,
              level: 2,
              top_limit: null,
              floor_limit: null,
              waring_time: null,
              goodsType: [
                {
                  goodstype_id: 1000002,
                  goodstype_name: "生物传感器",
                  hierarchy: 9,
                  goodstype_number: "020202",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        //tree参数配置
        children: "goodsType",
        label: "goodstype_name"
      },
      theKeys: [], //默认展开的key
      allSupplier: [
        //下拉选择数据
        {
          supplier_id: 1,
          supplier_name: "众信慧德",
          supplier_phone: "15195821268",
          supplier_address: "惠达路9号",
          supplier_contact_ren: "李达",
          remark: null,
          supplier_yuliu1: "",
          supplier_yuliu2: null
        },
        {
          supplier_id: 2,
          supplier_name: "众信",
          supplier_phone: "123456789111",
          supplier_address: "惠达路",
          supplier_contact_ren: "林冲",
          remark: "测试",
          supplier_yuliu1: "",
          supplier_yuliu2: null
        }
      ],
      isAdd: false, //是否新增
      addOrEdit: "新增", //新增或编辑（弹窗标题）
      theAdd: { goods_number: "" }, //新增和编辑表单
      rules: {
        //表单验证
        goods_number: [
          { required: true, message: "请输入编码", trigger: "blur" },
          { min: 3, max: 25, message: "长度在 3 到 25 个字符", trigger: "blur" }
        ]
      }
    };
  },
  components: {},
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    handleNodeClick(){},
    toAddOrEdit() {
      this.isAdd = true;
    },
    doAdd(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("valid");
        } else {
          alert("error");
          return false;
        }
      });
    },
    toAdd() {
      this.theAdd = {};
      this.theKeys = [];
      this.addOrEdit = "新增物资";
      this.isAdd = true;
      if (this.allClass != []) {
        this.$nextTick(function() {
          this.$refs["tree"].setCurrentKey("");
        });
      }
    },
    handleEdit(index, row) {
      this.theAdd = row;
      this.addOrEdit = "编辑物资";
      this.isAdd = true;
      this.theKeys = [];
      if (this.allClass != []) {
        this.$nextTick(function() {
          this.theKeys.push(row.goodstype_id);
          this.$refs["tree"].setCurrentKey(row.goodstype_id);
        });
      }
    }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped>
</style>


